<template>
  <div class="allCar">
      <x-header title="我的车辆" :left-options="{backText:''}" class='whiteHeader'></x-header>
      <div class="allCars">
        <div class="carList" v-for="item in allCarMess.CARS" v-if='item.BRAND!="未设置"'>
          <div class="allMess border-bottom">
            <div class="carLogo">
            	<img :src="allCarMess.CAR_LOGO_URL+item.SICON" alt="">
            </div>
            <div class="carMess">
                <p>
                {{item.LICENCE}} <span v-if='item.MILE'>里程 {{item.MILE}} km</span>
              </p>
              <h2>{{item.BRAND}}{{item.SET}}{{item.MODEL}}</h2>
            </div>
          </div>
          <div class="operate">
              <div class="select" @click="selectCar(item.CAR_ID)" :class="{'on':item.CAR_ID==selectId}"></div><em :class="{'active':item.CAR_ID==selectId}">设为默认</em>
            <span @click="deleteCar(item.CAR_ID)" class="delete">
            </span>
            <span @click="editCar(item)" class="edit">
            </span>
          </div>
        </div>
        
      </div>
      <div class="noData" v-if='allCarMess&&allCarMess.CARS.length==0'>
        <img src="../../assets/image/address/noCar.png" alt="" />
        <p>你暂无车辆，请添加</p>
      </div>
      <a class="addCar" href="javascript:;" @click='addCar'>
         <img src="../../assets/image/address/addCar.png">
        添加爱车
      </a>
  </div>
</template>
<script>
/*所有车辆*/
import { XHeader } from 'vux';
// import { MessageBox } from 'mint-ui';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"allCar",
  // 数据
  data(){

    return{
    	userId:'', //用户
    	allCarMess:'',  //所有车辆的信息
    	selectId:''   //选择默认id
    }
  },
  // 子组件
  components:{
  	XHeader
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    this.selectId=getCookie('CAR_ID');
    //获取用户所有车辆
    this.$fetchGet('/UserWeb/getCars.action',{USER_ID:this.userId}).then(res=>{
        if(res.STATUS_CODE==1){
          this.allCarMess=res;
          localStorage.setItem("publicUrl",this.allCarMess.CAR_LOGO_URL);
        }
    },err=>{
      console.log(err);
    })
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    // 选择车辆(设置默认车辆)
      selectCar(id){
        this.$fetchPost('/TempCarWeb/updateUseCar.action',{USER_ID:this.userId,CAR_INFO_ID:id}).then(res=>{
          if(res.STATUS_CODE==1){
            this.selectId=id;
            setCookie('CAR_ID',id);
          }
        },err=>{
          console.log(err);
        })
      },
      //删除车辆
      deleteCar(id){
        if(id==this.selectId){
          this.$vux.alert.show({
            title: '提示',
            content: '默认车辆不能删除'
          })
          return;
        }
        this.$fetchPost('/TempCarWeb/deleteTempCar.action',{USER_ID:this.userId,CAR_ID:id}).then(res=>{
              let that=this;
              if(res.STATUS_CODE==1){
                this.$vux.alert.show({
                  title: '提示',
                  content: '车辆删除成功',
                  onHide () {
                    that.allCarMess.CARS=that.allCarMess.CARS.filter(function(item){
                      return item.CAR_ID!=id;
                    })
                  }
                })
              }
            },err=>{
              console.log(err);
            })
      },
      //编辑车辆
      editCar(item){
        localStorage.setItem("editCar",JSON.stringify(item));//存储编辑的信息
        localStorage.removeItem('from');
        localStorage.removeItem("addCar")
        this.$router.push("/updateCar")
      },
      addCar(){
        localStorage.setItem("addCar",JSON.stringify({}));
        localStorage.removeItem('from');
        localStorage.removeItem('editCar');
        this.$router.push("/addCar");
        // 表示添加车辆不是来自选择车辆
        localStorage.removeItem('selectCars');
      }
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.allCar{
  width: 7.5rem;
  padding-bottom: 0.6rem;
  min-height: 100%;
  background: #efeff4;
  .commentHeader{
    background: #fff;
    color: #000;
    border-bottom: 1px solid #d9d9d9;
    font-size: 0.361111rem;
  }
  .noData{
        position: absolute;
        top: 50%;
        left: 50%;
        text-align: center;
        transform: translate(-50%,-50%);
        img{
          width: 1.7rem;
          height: 1.41rem;
        }
        p{
          font-size: 0.22rem;
          color: #ccc;
        }
    }
  .allCars{
   
    .carList{
      background: #fff;
      margin-bottom: 0.2rem;
      text-align: left;
      .border-bottom{
          position: relative;
          border-top: none !important;
      }
      .border-bottom::after {
          content: " ";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1px;
          background-color: #e0e0e0;
          -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
      }
      .allMess{
        display: flex;
        /* border-bottom: 1px solid #e1e1e1; */
        padding:0.1rem 0.15rem;
        .carLogo{
        	width:15%;
        	img{
        		display: block;
        		width: 0.8rem;
        		height: 0.8rem;
        		margin:0.1rem auto;
        	}
        }
        .carMess{
          padding: 0 0 0 0.2rem;
          width: 85%;
          h2{
            font-size: 0.22rem;
            margin: 0.1rem 0;
            color: #686868;
            margin-bottom: 0.2rem;
          }
          p{
            font-size: 0.3rem;
            font-weight: bold;
            color: #111;
            margin: 0.1rem 0 0.2rem 0;
            span{
              float: right;
              font-size: 0.26rem;
              color:#666;
              padding-right: 0.28rem;
              font-weight: normal;
            }
          }
          
        }
      }
      .operate{
        height: 0.76rem;
        padding:0rem 0.2rem;
        .select{
          width: 0.42rem;
          height:0.4rem;
          margin-top: 0.2rem;
          float: left;
          padding: 0.15rem;
          background: url(../../assets/image/address/noChecked.png) center center no-repeat;
          background-size: 0.39rem 0.4rem;
        }
        .on{
          background: url(../../assets/image/address/checked.png) center center no-repeat;
          background-size: 0.39rem 0.4rem;
        }
        em{
          font-size: 0.277778rem;
          color: #686868;
          font-style: normal;
          line-height: 0.83rem;
          float: left;
          padding-left: 0.1rem;
        }
        .active{
          color: red;
        }
        span{
          float: right;
          font-size: 0.25rem;
          margin-top: 0.23rem;
          margin-right: 0.2rem;
          display: inline-block;
          width:0.4rem;
          height: 0.4rem;
          color: #686868;
        }
        .edit{
          background: url(../../assets/image/address/edit.png) no-repeat;
          background-size: 0.32rem 0.32rem;
          margin-right: 0.42rem;
        }
        .delete{
          background: url(../../assets/image/address/delete.png) no-repeat;
          background-size: 0.32rem 0.32rem;
        }
      }
    }
    
  }
  .addCar{
    position:fixed;
    bottom:0;
    width: 100%;
    display: block;
    height:0.8rem;
    line-height: 0.8rem;
    font-size: 0.305556rem;
    text-align: center;
    background: #ec2121;
    display: flex;
    align-items:center;
    justify-content:center;
    color: #fff;
    img{
      width: 0.55rem;
      height: 0.33rem;
      margin-right: 0.1rem;
    }
  }
}
</style>